<script setup lang="ts">
import {PAY_TYPE} from "~/const/Maps";
definePageMeta({
  title:'域名列表',
  layout:'w1200'
})
const route=useRoute()
const [search_domain,...search_suffix]=(route.query.domain as string)?.split('.')??[]
const form=reactive({
  page:1,// 页码
  limit:10,// 每页显示数量
  search_domain:search_domain??'',// 搜索域名
  search_suffix:search_suffix.join('.')??'',// 搜索后缀
  search_expire_date:'',//过期时间，在这时间后过期的都会查询出来
});
const {data:list,refresh}=await useServerGet('/west/getAllDomainList',form)
const search=()=>{
  refresh&&refresh();
}

</script>

<template>
  <div>
    <div class="my-4 text-base">域名列表</div>
    <el-card>
      <el-form :model="form" label-width="0" inline class="my" >
        <el-form-item >
          <el-input v-model="form.search_domain" placeholder="请输入域名" clearable></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="form.search_suffix" placeholder="请输入后缀" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker type="date" placeholder="过期日期" v-model="form.search_expire_date" clearable value-format="YYY-MM-DD"></el-date-picker>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="refresh">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="mt-4">
      <el-table :data="list.data.list" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}" class="h-[620px] overflow-auto">
        <el-table-column prop="domain" label="域名"></el-table-column>
        <el-table-column label="长度">
          <template #default="{row}">
            <span>{{row.domain.endsWith('.com.cn')?row.domain.split('.').slice(0,-2).join('.').length:row.domain.split('.').slice(0,-1).join('.').length}}</span>
          </template>
        </el-table-column>
        <el-table-column label="域名简介" width="500">
          <template #default="scope" >
            <div v-if="scope.row.domain_info?.domain">
              <div class="grid grid-cols-5 gap-[1] text-xs text-blue-400"><span >PC_BR：{{scope.row?.domain_info?.pc_br}}</span><span>PC收录：{{scope.row?.domain_info?.pc_sum}}</span><span>M_BR：{{scope.row?.domain_info?.m_br}}</span><span>M收录：{{scope.row?.domain_info?.m_sum}}</span>
                <el-tooltip content="PC最大权重" placement="top" effect="dark">
                  <template #content>
                    <el-form class="w-max mx-auto my grid grid-cols-2" label-suffix=": " label-width="120" inline label-position="left">
                      <el-form-item label="域名">
                        {{scope.row?.domain_info?.domain}}
                      </el-form-item>
                      <el-form-item label="PC权重">
                        {{scope.row?.domain_info?.pc_br}}
                      </el-form-item>
                      <el-form-item label="PC最大权重">
                        {{scope.row?.domain_info?.pc_br_max}}
                      </el-form-item>
                      <el-form-item label="PC最大收录">
                        {{scope.row?.domain_info?.pc_nums_max}}
                      </el-form-item>
                      <el-form-item label="PC最大收录时间">
                        {{scope.row?.domain_info?.pc_max_time}}
                      </el-form-item>
                      <el-form-item label="PC最小权重">
                        {{scope.row?.domain_info?.pc_br_min}}
                      </el-form-item>
                      <el-form-item label="PC最小收录">
                        {{scope.row?.domain_info?.pc_nums_min}}
                      </el-form-item>
                      <el-form-item label="PC最小收录时间">
                        {{scope.row?.domain_info?.pc_min_time}}
                      </el-form-item>
                      <el-form-item label="移动权重">
                        {{scope.row?.domain_info?.m_br}}
                      </el-form-item>
                      <el-form-item label="移动最大权重">
                        {{scope.row?.domain_info?.m_br_max}}
                      </el-form-item>
                      <el-form-item label="移动最大收录">
                        {{scope.row?.domain_info?.m_nums_max}}
                      </el-form-item>
                      <el-form-item label="移动最大收录时间">
                        {{scope.row?.domain_info?.m_max_time}}
                      </el-form-item>
                      <el-form-item label="移动最小权重">
                        {{scope.row?.domain_info?.m_br_min}}
                      </el-form-item>
                      <el-form-item label="移动最小收录">
                        {{scope.row?.domain_info?.m_nums_min}}
                      </el-form-item>
                    </el-form>
                  </template>
                  <el-icon-question-filled class="w-4 h-4">?</el-icon-question-filled>
                </el-tooltip>
              </div>
            </div>
            <div v-else>
              -
            </div>

          </template>
        </el-table-column>
        <el-table-column prop="regdate" label="注册时间" width="150">
          <template #default="{row}">
            <span>{{row.regdate.split(' ')[0]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="expdate" label="到期时间" width="150">
          <template #default="{row}">
            <span>{{row.expdate.split(' ')[0]}}</span>
          </template>
        </el-table-column>
      </el-table>

      <MyPage v-model:page="form.page" v-model:perpage="form.limit" v-model:total="list.data.total" @change="refresh"></MyPage>
    </el-card>
  </div>
</template>

<style scoped lang="scss">

</style>